<template>
  <view class="content">
    <map style="width: 100%; height: 100vh;" :latitude="latitude" :longitude="longitude" :markers="covers">
    </map>
  </view>
</template>

<script>
export default {
  data() {
    return {
      title: 'Hello',
      stationList:[],
      id:0, // 使用 marker点击事件 需要填写id
      title: 'map',
      latitude: 39.909,
      longitude: 116.39742,
      covers: [{
        latitude: 39.909,
        longitude: 116.39742,
        iconPath: '/static/logo.png'
      }, {
        latitude: 39.90,
        longitude: 116.39,
        iconPath: '/static/logo.png'
      }]
    }
  },
  onLoad() {
    debugger
    console.log(this)//查看this是什么对象
    let _this=this//申明局部变量,_this作用域是onLoad(),getLocation中的success可以访问_this
    uni.getLocation({
      type: 'gcj02',
      success: function (res) {
        debugger
        console.log(this)
        console.log('当前位置的经度：' + res.longitude);
        console.log('当前位置的纬度：' + res.latitude);
        //修改地图中心点为当前位置
        _this.latitude=res.latitude
        _this.longitude=res.longitude
        //在当前位置上显示一个图片
        _this.covers[0].latitude=res.latitude
        _this.covers[0].longitude=res.longitude
        //定位成功后取附近的充电站
        uni.request({
          url:"http://vwsdzq.natappfree.cc:80/charge/station/selectNearbyStation?longitude="
              +_this.longitude+"&latitude="
              +_this.latitude
              +"&radius=5000",
          method:'GET',
          success: (res) => {
            debugger
            console.log(res)
            //res有4个属性，data放的是controller返回的数据
            let ajaxResult=res.data
            //ajaxResult有3个属性，分别是code,msg,data
            _this.stationList=ajaxResult.data
            //联网成功后，遍历充电站
            for(let i=0;i<_this.stationList.length;i++){
              let station=_this.stationList[i]
              //地图上的标记
              let marker={
                latitude:station.stationLat,
                longitude:station.stationLng,
                iconPath:"/static/logo.png"
              }
              //把标记显示在地图上
              _this.covers.push(marker)
            }
          }
        })

      }
    });

    //页面加载完执行


  },
  methods: {

  }
}
</script>

<style>
.content {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.logo {
  height: 200rpx;
  width: 200rpx;
  margin-top: 200rpx;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 50rpx;
}

.text-area {
  display: flex;
  justify-content: center;
}

.title {
  font-size: 36rpx;
  color: #8f8f94;
}
</style>
